<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<title>纯CSS3的单选框、复选框、开关按钮UI库|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" href="./dist/checkbox.css">
	<style>
		.margin-r{
			margin-right:10px;
			vertical-align: top;
			line-height:1.6;
		}
		.container{
			width:900px;
			padding-bottom:100px;
		}
		.btn-primary{
			border-color: #20a0ff !important;
			background-color: #20a0ff !important;
			margin-right:20px;
		}
	</style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>纯CSS3的单选框、复选框、开关按钮UI库 <span>A UI library with pure CSS3 radio, check, switch</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/css3/ui-design/201712094871.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="container">
			<h1 class="text-center">el-checkbox</h1>
			<p class="text-center text-muted">Beautify Radio and Checkbox with pure CSS</p>
			<h3 class="text-center">Default theme</h3>
			<div class="row">
				<div class="col-md-4">
					<h4 >Checkbox</h4>
					<div class="el-checkbox">
						<span class="margin-r">Unchecked</span>
						<input type="checkbox" name="check" id="1_1">
						<label class="el-checkbox-style" for="1_1"></label>
					</div>
					<div class="el-checkbox">
						<span class="margin-r">Checked</span>
						<input type="checkbox" name="check" id="1_2" checked>
						<label class="el-checkbox-style" for="1_2"></label>
					</div>
					<div class="el-checkbox">
						<span class="margin-r">Disabled</span>
						<input type="checkbox" name="check" id="1_3" value="option" disabled>
						<label class="el-checkbox-style" for="1_3"></label>
					</div>
					<div class="el-checkbox">
						<span class="margin-r">Checked && Disabled</span>
						<input type="checkbox" name="check" id="1_4" checked disabled>
						<label class="el-checkbox-style" for="1_4"></label>
					</div>
				</div>
				<div class="col-md-4">
					<h4>Radio</h4>
					<div class="el-radio">
						<span class="margin-r">Unchecked</span>
						<input type="radio" name="radio1" id="1_5" value="option" >
						<label class="el-radio-style" for="1_5"></label>
					</div>
					<div class="el-radio">
						<span class="margin-r">Checked</span>
						<input type="radio" name="radio101" id="1_6" value="option" checked>
						<label class="el-radio-style" for="1_6"></label>
					</div>
					<div class="el-radio">
						<span class="margin-r">Disabled</span>
						<input type="radio" id="1_7" value="option" disabled>
						<label class="el-radio-style" for="1_7"></label>
					</div>
					<div class="el-radio">
						<span class="margin-r">Checked && Disabled</span>
						<input type="radio" id="1_8" value="option" checked disabled>
						<label class="el-radio-style" for="1_8"></label>
					</div>
				</div>
				<div class="col-md-4">
					<h4 >Switch</h4>
					<div>
						<span class="margin-r">switch</span>
						<label class="el-switch">
							<input type="checkbox" name="switch">
							<span class="el-switch-style"></span>
						</label>
					</div>
					<div>
						<span class="margin-r">switch</span>
						<label class="el-switch">
							<input type="checkbox" name="switch" checked>
							<span class="el-switch-style"></span>
						</label>
					</div>
					<div>
						<span class="margin-r">Disabled</span>
						<label class="el-switch">
							<input type="checkbox" name="switch" disabled>
							<span class="el-switch-style"></span>
						</label>
					</div>
					<div>
						<span class="margin-r">Checked && Disabled</span>
						<label class="el-switch">
							<input type="checkbox" name="switch" checked disabled>
							<span class="el-switch-style"></span>
						</label>
					</div>
				</div>
			</div>

			<h3 class="text-center">Size</h3>
			<div class="row">
				<div class="col-md-4">
					<h4 >Checkbox(外部label包裹)</h4>
					<label class="el-checkbox el-checkbox-sm">
						<span class="margin-r">small checkbox</span>
						<input type="checkbox" name="check" checked>
						<span class="el-checkbox-style  pull-right"></span>
					</label>
					<label class="el-checkbox">
						<span class="margin-r">default checkbox</span>
						<input type="checkbox" name="check" checked>
						<span class="el-checkbox-style  pull-right"></span>
					</label>
					<label class="el-checkbox el-checkbox-lg">
						<span class="margin-r">large checkbox</span>
						<input type="checkbox" name="check" checked>
						<span class="el-checkbox-style  pull-right"></span>
					</label>
					<label class="el-checkbox" style="font-size:150%">
						<span class="margin-r">custom size</span>
						<input type="checkbox" name="check" checked>
						<span class="el-checkbox-style  pull-right"></span>
					</label>
				</div>
				<div class="col-md-4">
					<h4 >Radio(外部label包裹)</h4>
					<label class="el-radio el-radio-sm">
						<span class="margin-r">small radio</span>
						<input type="radio" name="radio_size">
						<span class="el-radio-style  pull-right"></span>
					</label>
					<label class="el-radio">
						<span class="margin-r">default radio</span>
						<input type="radio" name="radio_size" checked>
						<span class="el-radio-style  pull-right"></span>
					</label>
					<label class="el-radio el-radio-lg">
						<span class="margin-r">large radio</span>
						<input type="radio" name="radio_size">
						<span class="el-radio-style  pull-right"></span>
					</label>
					<label class="el-radio" style="font-size:150%">
						<span class="margin-r">custom size</span>
						<input type="radio" name="radio_size">
						<span class="el-radio-style  pull-right"></span>
					</label>
				</div>
				<div class="col-md-4">
					<h4 >Switch</h4>
					<div>
						<span class="margin-r">small switch</span>
						<label class="el-switch el-switch-sm">
							<input type="checkbox" name="switch" checked>
							<span class="el-switch-style"></span>
						</label>
					</div>
					<div>
						<span class="margin-r">default switch</span>
						<label class="el-switch">
							<input type="checkbox" name="switch" checked>
							<span class="el-switch-style"></span>
						</label>
					</div>
					<div>
						<span class="margin-r">large switch</span>
						<label class="el-switch el-switch-lg">
							<input type="checkbox" name="switch" checked>
							<span class="el-switch-style"></span>
						</label>
					</div>
					<div>
						<span class="margin-r">custom size</span>
						<label class="el-switch" style="font-size:150%">
							<input type="checkbox" name="switch" checked>
							<span class="el-switch-style"></span>
						</label>
					</div>
				</div>
			</div>

			<h3 class="text-center">Green theme</h3>
			<div class="row">
				<div class="col-md-4">
					<h4 >Checkbox</h4>
					<div class="el-checkbox el-checkbox-green">
						<span class="margin-r">Unchecked</span>
						<input type="checkbox" name="check" id="2_1">
						<label class="el-checkbox-style" for="2_1"></label>
					</div>
					<div class="el-checkbox el-checkbox-green">
						<span class="margin-r">Checked</span>
						<input type="checkbox" name="check23" id="2_2" checked>
						<label class="el-checkbox-style" for="2_2"></label>
					</div>
					<div class="el-checkbox el-checkbox-green">
						<span class="margin-r">Disabled</span>
						<input type="checkbox" name="check" id="2_3" value="option" disabled>
						<label class="el-checkbox-style" for="2_3"></label>
					</div>
					<div class="el-checkbox el-checkbox-green">
						<span class="margin-r">Checked && Disabled</span>
						<input type="checkbox" name="check" id="2_4" checked disabled>
						<label class="el-checkbox-style" for="2_4"></label>
					</div>
				</div>
				<div class="col-md-4">
					<h4>Radio</h4>
					<div class="el-radio el-radio-green">
						<span class="margin-r">Unchecked</span>
						<input type="radio" name="radio1" id="2_5" value="option">
						<label class="el-radio-style" for="2_5"></label>
					</div>
					<div class="el-radio el-radio-green">
						<span class="margin-r">Checked</span>
						<input type="radio" name="radio105" id="2_6" value="option" checked>
						<label class="el-radio-style" for="2_6"></label>
					</div>
					<div class="el-radio el-radio-green">
						<span class="margin-r">Disabled</span>
						<input type="radio" id="2_7" value="option" disabled>
						<label class="el-radio-style" for="2_7"></label>
					</div>
					<div class="el-radio el-radio-green">
						<span class="margin-r">Checked && Disabled</span>
						<input type="radio" id="2_8" value="option" checked disabled>
						<label class="el-radio-style" for="2_8"></label>
					</div>
				</div>
				<div class="col-md-4">
					<h4 >Switch</h4>
					<div>
						<span class="margin-r">switch</span>
						<label class="el-switch el-switch-green">
							<input type="checkbox" name="switch">
							<span class="el-switch-style"></span>
						</label>
					</div>
					<div>
						<span class="margin-r">switch</span>
						<label class="el-switch el-switch-green">
							<input type="checkbox" name="switch" checked>
							<span class="el-switch-style"></span>
						</label>
					</div>
					<div>
						<span class="margin-r">Disabled</span>
						<label class="el-switch el-switch-green">
							<input type="checkbox" name="switch" disabled>
							<span class="el-switch-style"></span>
						</label>
					</div>
					<div>
						<span class="margin-r">Checked && Disabled</span>
						<label class="el-switch el-switch-green">
							<input type="checkbox" name="switch" checked disabled>
							<span class="el-switch-style"></span>
						</label>
					</div>
				</div>
			</div>

			<h3 class="text-center">Red theme</h3>
			<div class="row">
				<div class="col-md-4">
					<h4 >Checkbox</h4>
					<div class="el-checkbox el-checkbox-red">
						<span class="margin-r">Unchecked</span>
						<input type="checkbox" name="check" id="3_1">
						<label class="el-checkbox-style" for="3_1"></label>
					</div>
					<div class="el-checkbox el-checkbox-red">
						<span class="margin-r">Checked</span>
						<input type="checkbox" name="check26" id="3_2" checked>
						<label class="el-checkbox-style" for="3_2"></label>
					</div>
					<div class="el-checkbox el-checkbox-red">
						<span class="margin-r">Disabled</span>
						<input type="checkbox" name="check" id="3_3" value="option" disabled>
						<label class="el-checkbox-style" for="3_3"></label>
					</div>
					<div class="el-checkbox el-checkbox-red">
						<span class="margin-r">Checked && Disabled</span>
						<input type="checkbox" name="check" id="3_4" checked disabled>
						<label class="el-checkbox-style" for="3_4"></label>
					</div>
				</div>
				<div class="col-md-4">
					<h4>Radio</h4>
					<div class="el-radio el-radio-red">
						<span class="margin-r">Unchecked</span>
						<input type="radio" name="radio1" id="3_5" value="option" >
						<label class="el-radio-style" for="3_5"></label>
					</div>
					<div class="el-radio el-radio-red">
						<span class="margin-r">Checked</span>
						<input type="radio" name="radio104" id="3_6" value="option" checked>
						<label class="el-radio-style" for="3_6"></label>
					</div>
					<div class="el-radio el-radio-red">
						<span class="margin-r">Disabled</span>
						<input type="radio" id="3_7" value="option" disabled>
						<label class="el-radio-style" for="3_7"></label>
					</div>
					<div class="el-radio el-radio-red">
						<span class="margin-r">Checked && Disabled</span>
						<input type="radio" id="3_8" value="option" checked disabled>
						<label class="el-radio-style" for="3_8"></label>
					</div>
				</div>
				<div class="col-md-4">
					<h4 >Switch</h4>
					<div>
						<span class="margin-r">switch</span>
						<label class="el-switch el-switch-red">
							<input type="checkbox" name="switch">
							<span class="el-switch-style"></span>
						</label>
					</div>
					<div>
						<span class="margin-r">switch</span>
						<label class="el-switch el-switch-red">
							<input type="checkbox" name="switch" checked>
							<span class="el-switch-style"></span>
						</label>
					</div>
					<div>
						<span class="margin-r">Disabled</span>
						<label class="el-switch el-switch-red">
							<input type="checkbox" name="switch" disabled>
							<span class="el-switch-style"></span>
						</label>
					</div>
					<div>
						<span class="margin-r">Checked && Disabled</span>
						<label class="el-switch el-switch-red">
							<input type="checkbox" name="switch" checked disabled>
							<span class="el-switch-style"></span>
						</label>
					</div>
				</div>
			</div>

			<h3 class="text-center">Yellow theme</h3>
			<div class="row">
				<div class="col-md-4">
					<h4 >Checkbox</h4>
					<div class="el-checkbox el-checkbox-yellow">
						<span class="margin-r">Unchecked</span>
						<input type="checkbox" name="check" id="4_1">
						<label class="el-checkbox-style" for="4_1"></label>
					</div>
					<div class="el-checkbox el-checkbox-yellow">
						<span class="margin-r">Checked</span>
						<input type="checkbox" name="check" id="4_2" checked>
						<label class="el-checkbox-style" for="4_2"></label>
					</div>
					<div class="el-checkbox el-checkbox-yellow">
						<span class="margin-r">Disabled</span>
						<input type="checkbox" name="check" id="4_3" value="option" disabled>
						<label class="el-checkbox-style" for="4_3"></label>
					</div>
					<div class="el-checkbox el-checkbox-yellow">
						<span class="margin-r">Checked && Disabled</span>
						<input type="checkbox" name="check" id="4_4" checked disabled>
						<label class="el-checkbox-style" for="4_4"></label>
					</div>
				</div>
				<div class="col-md-4">
					<h4>Radio</h4>
					<div class="el-radio el-radio-yellow">
						<span class="margin-r">Unchecked</span>
						<input type="radio" name="radio1" id="4_5" value="option">
						<label class="el-radio-style" for="4_5"></label>
					</div>
					<div class="el-radio el-radio-yellow">
						<span class="margin-r">Checked</span>
						<input type="radio" name="radio109" id="4_6" value="option" checked>
						<label class="el-radio-style" for="4_6"></label>
					</div>
					<div class="el-radio el-radio-yellow">
						<span class="margin-r">Disabled</span>
						<input type="radio" id="4_7" value="option" disabled>
						<label class="el-radio-style" for="4_7"></label>
					</div>
					<div class="el-radio el-radio-yellow">
						<span class="margin-r">Checked && Disabled</span>
						<input type="radio" id="4_8" value="option" checked disabled>
						<label class="el-radio-style" for="4_8"></label>
					</div>
				</div>
				<div class="col-md-4">
					<h4 >Switch</h4>
					<div>
						<span class="margin-r">switch</span>
						<label class="el-switch el-switch-yellow">
							<input type="checkbox" name="switch">
							<span class="el-switch-style"></span>
						</label>
					</div>
					<div>
						<span class="margin-r">switch</span>
						<label class="el-switch el-switch-yellow">
							<input type="checkbox" name="switch" checked>
							<span class="el-switch-style"></span>
						</label>
					</div>
					<div>
						<span class="margin-r">Disabled</span>
						<label class="el-switch el-switch-yellow">
							<input type="checkbox" name="switch" disabled>
							<span class="el-switch-style"></span>
						</label>
					</div>
					<div>
						<span class="margin-r">Checked && Disabled</span>
						<label class="el-switch el-switch-yellow">
							<input type="checkbox" name="switch" checked disabled>
							<span class="el-switch-style"></span>
						</label>
					</div>
				</div>
			</div>

		</div>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/css3/css3donghua/20141122560.html">
			  <img src="related/1.jpg" width="300" alt="纯css3单选框和复选框样式美化效果"/>
			  <h3>纯css3单选框和复选框样式美化效果</h3>
			</a>
			<a href="http://www.htmleaf.com/jQuery/Form/20141122566.html">
			  <img src="related/2.jpg" width="300" alt="jQuery和css3单选框复选框美化效果"/>
			  <h3>jQuery和css3单选框复选框美化效果</h3>
			</a>
		</div>
	</div>
	
</body>
</html>